<template>
  <t-dropdown v-if="isShow" trigger="click">
    <t-button theme="default" shape="square" variant="text">
      <translate-icon />
    </t-button>
    <t-dropdown-menu>
      <t-dropdown-item v-for="(lang, index) in langList" :key="index" :value="lang.key" @click="changeLocale(lang.key)">
        {{ lang.name }}
      </t-dropdown-item>
    </t-dropdown-menu>
  </t-dropdown>
</template>

<script setup lang="ts">
import { TranslateIcon } from 'tdesign-icons-vue-next';
import { langList } from '@/locales';
import { useLocale } from '@/hooks/useLocale';
const { changeLocale } = useLocale();

const isShow = ref(false)

</script>

<style lang="less" scoped>
.t-button {
  margin-left: var(--td-comp-margin-l);
}
</style>
